<template>
	<view>
	    <!-- 选择皮肤 -->
		<view class="skin">
			<view class="topTitle">
				<view class="title">主题颜色</view>
				<view class="reply" @click="reply">恢复默认</view>
			</view>
			<view class="color">
				<view class="colorItem" v-for="(item,index) in colorItem" :style="{backgroundColor: item.themeColor,border:item.skinId == checkColor.skinId ? '#219F68 solid 3rpx' : ''}" @click="chooseColor(item.skinId)">
					<image v-if="item.skinId == checkColor.skinId" mode="widthFix" src="@/static/images/other/correct.png"></image>
				</view>
			</view>
		</view>
		<!-- 确认按钮 -->
		<view class="confirm" @click="setSkin">
			<view>确认</view>
		</view>
		
		<!-- 提示信息弹窗 -->
		<popup ref="popup"></popup>
	</view>
</template>

<script>
	import popup from "@/components/popup.vue";
	import {getAllSkin,getDefaultSkin,setSkin,getSkin} from "@/api/skin.js";
	export default {
		components:{popup},
		data() {
			return {
				checkColor:{
					skinId:0,
				},
				defaultSkin:{},
				colorItem:[],
				themeColor:"",
				themeColorLess:"",
			}
		},
		methods: {
			chooseColor(skinId){
				this.checkColor.skinId = skinId;
			},
			reply(){
				this.chooseColor(this.defaultSkin.skinId);
			},
			async setSkin(){
				let ans = (await setSkin(this.checkColor.skinId)).data;
				console.log("setSkin",ans);
				if (ans.code != 200) {
					this.$refs.popup._popError(ans.error);
					return;
				} else {
					let color;
					for(let i = 0; i < this.colorItem.length; i++) {
						if (this.colorItem[i].skinId == this.checkColor.skinId) {
							color = this.colorItem[i];
							break;
						}
					}
					uni.setStorageSync("color",JSON.stringify(color));
					this.$refs.popup._popSuccess("设置成功");
				}
			}
		},
		async onLoad(){
			// 获取全部主题色
			let ans = (await getAllSkin()).data;
			console.log("getAllSkin",ans);
			if (ans.code != 200) {
				this.$refs.popup._popError(ans.error);
				return;
			}
			this.colorItem = ans.data;
			// 获取默认主题色
			ans = (await getDefaultSkin()).data;
			console.log("defaultSkin:",ans);
			if (ans.code != 200) {
				this.$refs.popup._popError(ans.error);
				return;
			}
			this.defaultSkin = ans.data;
			// 获取当前主题色
			ans = (await getSkin()).data;
			console.log("getSkin",ans);
			if (ans.code != 200) {
				this.$refs.popup._popError(ans.error);
				return;
			}
			this.checkColor.skinId = ans.data.skinId;
		},
	}
</script>

<style lang="scss">
	page{
		background-color: $bg-color;
	}
	
	//选择皮肤
	.skin{
		margin: 34rpx $both-sides 0 $both-sides;
		
		.topTitle{
			display: flex;
			justify-content: space-between;
			
			.title{
				font-size: 26rpx;
				font-weight: 600;
			}
			.reply{
				font-size: 26rpx;
				color: #5FA0BA;
			}
		}
		
		.color{
			margin-top: 30rpx;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			
			.colorItem{
				width: 80rpx;
				height: 80rpx;
				border-radius: 8rpx;
				margin: 16rpx;
				position: relative;
				
				image{
					width: 40rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
				}
			}
		}
	}
	
	//确认按钮
	.confirm{
		width: 140rpx;
		height: 80rpx;
		margin: 40rpx auto;
		border-radius: 16rpx;
		overflow: hidden;
		view{
			width: 100%;
			height: 100%;
			background-color: $theme-color;
			color: white;
			line-height: 80rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 600;
			
		}
	}
	
</style>
